const APIURL = "https://api.github.com/users/";
/* 获取元素 */
const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");

form.addEventListener("submit", (e) => {
  /* 阻止默认事件 */
  e.preventDefault();

  const user = search.value;
  /* user为不为空 */
  if (user) {
    /* 调用发起请求的函数 */
    getUser(user);
    /* 置为空 */
    search.value = "";
  }
});

const getUser = async (username) => {
  try {
    const { data } = await axios(APIURL + username);
    /* 创建用户卡片 */
    createUserCard(data);
    /*  */
    getRepos(username);
  } catch (error) {
    /* 出错了 */
    if (error.response.status == 404) {
      createErrorCard("这个用户名没有个人资料");
    }
  }
};

const getRepos = async (username) => {
  try {
    const { data } = await axios(APIURL + username + "/repos?sort=created");
    /*  */
    addReposToCard(data);
  } catch (err) {
    /* 请求出错啦 */
    createErrorCard("Problem fetching repos");
  }
};

/* 成功往main元素中添加的内容 */
const createUserCard = (user) => {
  /* user.name或者user.login谁东西就取谁 */
  const userID = user.name || user.login;
  /* 三元表达式 如果user.bio为真就取user.bio不为真就设为"" */
  const userBio = user.bio ? `<p>${user.bio}</p>` : "";
  /* 字符串 */
  const cardHTML = `
  <div class="card">
  <div>
    <img src="${user.avatar_url}" alt="${user.name}" class="avatar">
  </div>
  <div class="user-info">
    <h2>${userID}</h2>
    ${userBio}
    <ul>
      <li>${user.followers} <strong>Followers</strong></li>
      <li>${user.following} <strong>Following</strong></li>
      <li>${user.public_repos} <strong>Repos</strong></li>
    </ul>

    <div id="repos"></div>
  </div>
</div>
  `;
  /* 将字符串填充为main元素中的内容 */
  main.innerHTML = cardHTML;
};
/* 失败往main元素中添加的内容 */
const createErrorCard = (msg) => {
  /* 创建一个字符串在字符中间加入失败的消息 */
  const cardHTML = `
      <div class="card">
          <h1>${msg}</h1>
      </div>
  `;
  /* 将字符串填充为main元素中的内容 */
  main.innerHTML = cardHTML;
};

const addReposToCard = (repos) => {
  console.log(repos);
  /* 获取元素 */
  const reposEl = document.getElementById("repos");
  /* 浅拷贝数组的0到5不包含5的数组循环 */
  repos.slice(0, 5).forEach((repo) => {
    /* 创建一个a标签 */
    const repoEl = document.createElement("a");
    /* 给a标签添加上一个repo类样式 */
    repoEl.classList.add("repo");
    /* 获取当前元素的html_url属性 */
    repoEl.href = repo.html_url;
    /* 将a标签的target属性设为_blank */
    repoEl.target = "_blank";
    /* 将a标签的文本内容设为当前元素的name属性 */
    repoEl.innerText = repo.name;
    /* 将a标签添加进reposEl元素中 */
    reposEl.appendChild(repoEl);
  });
};
